<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>棋盘错觉动画</title>
    <style>
        /*<!--居中显示-->*/
        body{
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        /*定义容器大小*/
        .container{
            /*vmin为视窗中vh和vw中较小的一个*/
            width: 100vmin;
            height: 100vmin;
            display: flex;
            /*将元素垂直显示如同列一样*/
            flex-direction: column;
            border-bottom: 0.5vmin solid gray;
        }
        .container span{
            width: inherit;
            height: 10vmin;
            /*线性渐变 纵向灰色渐变 0.5vmin的时候用transparent截断*/
            background: linear-gradient(gray,gray 0.5vmin,transparent 0.5vmin,transparent),
            repeating-linear-gradient(to right,black,black 10vmin,transparent 10vmin,transparent 20vmin);
        }
        /*动画制作*/
        .container span:nth-child(odd){
            animation: move 5s linear infinite;
        }
        @keyframes move {
            0%,55%,100% {
                background-position: 0 0;
            }
            5%,50%{
                 background-position: 5vmin 0;
              }
        }
        /*偶数行动画*/
        .container span:nth-child(even){
            animation: move 5s linear infinite reverse;
        }
    </style>
</head>
<body>
    <div class="container">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>